import React, { lazy, Suspense } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
const Detail = lazy(() => import("../pages/details/index"));
const Notfound = lazy(() => import("../pages/notfound/index"));
const Cites = lazy(() => import("../pages/cites/index"));
const Home = lazy(() => import("../pages/home/Home.jsx"));
// Home组件路由
const Movies = lazy(() => import("../pages/home/movies/index"));
const Videos = lazy(() => import("../pages/home/videos/index"));
const Minivideos = lazy(() => import("../pages/home/minivideos/index"));
const Show = lazy(() => import("../pages/home/show/index"));
const Mine = lazy(() => import("../pages/home/mine/index"));
// 电影组件路由
const Hot = lazy(() => import("../pages/home/movies/hot/Hot"));
const Cinema = lazy(() => import("../pages/home/movies/cinema/Cinema"));
const Classics = lazy(() => import("../pages/home/movies/classics/Classics"));
const Wait = lazy(() => import("../pages/home/movies/wait/Wait"));

export default function index() {
  return (
    <div>
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          {/* 主页路由 */}
          <Redirect from="/" to="/home" exact />
          <Route path="/home">
            <Home>
              <Redirect from="/home" to="/home/movies" exact />
              <Route path="/home/movies">
                {/* 电影 */}
                <Movies>
                  <Redirect from="/home/movies" to="/home/movies/hot" exact />
                  <Route path="/home/movies/hot">
                    {/* 热播 */}
                    <Hot></Hot>
                  </Route>
                  <Route path="/home/movies/cinema">
                    {/* 影院 */}
                    <Cinema></Cinema>
                  </Route>
                  <Route path="/home/movies/wait">
                    {/* 待映 */}
                    <Wait></Wait>
                  </Route>
                  <Route path="/home/movies/classics">
                    {/* 经典电影 */}
                    <Classics></Classics>
                  </Route>
                </Movies>
              </Route>
              <Route path="/home/videos">
                <Videos />
              </Route>
              <Route path="/home/minivideos">
                <Minivideos />
              </Route>
              <Route path="/home/show">
                <Show />
              </Route>
              <Route path="/home/mine" componnet={Mine}>
                <Mine />
              </Route>
            </Home>
          </Route>
          {/* 详情页路由 */}
          <Route path="/details/:id" component={Detail} />
          {/* 城市页路由 */}
          <Route path="/cites" component={Cites} />
          {/* 404路由 */}
          <Route path="*" component={Notfound} />
        </Switch>
      </Suspense>
    </div>
  );
}
